<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="webkit" name="renderer"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>
    <link href="favicon.ico" rel="shortcut icon"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <!--默认使用本地资源，如果想使用CDN资源，请自行把下面的“js/jquery.min.js”替换为CDN地址即可-->
    <script src="js/jquery.min.js"></script>
    <script src="js/qieh.js"></script>
    <!--默认使用本地资源，如果想使用CDN资源，请自行把下面的“js/particles.min.js”替换为CDN地址即可-->
    <script src="js/particles.min.js"></script>
    <script src="js/font.js"></script>
    <title>NasHomeCloud</title>
    <style>
      body {
        /*打开下面注释，页面支持滚顶条，适用于图标超多的情况*/
        /*overflow-y: auto;*/
        /*背景图设置，设置路径在"css/style.css"下的3310行开始，默认关闭，开头为“body {”*/
        /*也可以直接打开下面注释直接覆盖原生的渐变色背景，建议打开背景图之后注释渐变色背景样式“background: linear-gradient(135deg, #00C4FF, #9D1BB2) no-repeat fixed;”和“font-family: 'Helvetica Neue', 'Microsoft Yahei', SimHei, sans-serif;”*/
        /*background-size: cover;*/
        /*background: url(img/background.jpg) no-repeat fixed center top;*/
      }

      .shake {
        /*打开下面注释，可调整图标大小，可能会导致特定分辨率下的UI错乱*/
        /*width: 100px;*/
        /*height: 100px;*/
        /*打开下面注释可以给图标套上一个透明底层框*/
        /*border-radius: 20%;*/
        /*border-width: 0;*/
        /*box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);*/
      }

      .disabled-link {
        pointer-events: none; /* 阻止鼠标事件 */
        opacity: 0.3; /* 降低透明度以表示禁用状态 */
        text-decoration: none; /* 去除下划线效果 */
        cursor: default; /* 更改鼠标光标 */
      }

      #wrap::-webkit-scrollbar {
        /*打开下面注释，可以往下滑动，适用于超多链接(图标)场景*/
        /*width: 0;*/
      }
      #wrap {
        /*打开下面注释，可以往下滑动，适用于超多链接(图标)场景*/
        /*overflow-y: auto;*/
      }
    </style>
</head>
<body>
<div id="particles-js" style="position:absolute; top: 0; z-index: -1; width: 100%;height: 100%;">
    <canvas class="particles-js-canvas-el" height="960" style="width: 100%; height: 100%;" width="1303"></canvas>
</div>
<script>particlesJS("particles-js", {
  particles: {
    number: {
      value: 20,
      density: {
        enable: !0,
        value_area: 1000
      }
    },
    color: {
      value: "#e1e1e1"
    },
    shape: {
      type: "circle",
      stroke: {
        width: 0,
        color: "#000000"
      },
      polygon: {
        nb_sides: 5
      },
      image: {
        src: "img/github.svg",
        width: 100,
        height: 100
      }
    },
    opacity: {
      value: 0.5,
      random: !1,
      anim: {
        enable: !1,
        speed: 1,
        opacity_min: 0.1,
        sync: !1
      }
    },
    size: {
      value: 15,
      random: !0,
      anim: {
        enable: !1,
        speed: 180,
        size_min: 0.1,
        sync: !1
      }
    },
    line_linked: {
      enable: !0,
      distance: 650,
      color: "#cfcfcf",
      opacity: 0.26,
      width: 1
    },
    move: {
      enable: !0,
      speed: 2,
      direction: "none",
      random: !0,
      straight: !1,
      out_mode: "out",
      bounce: !1,
      attract: {
        enable: !1,
        rotateX: 600,
        rotateY: 1200
      }
    }
  },
  interactivity: {
    detect_on: "canvas",
    events: {
      onhover: {
        enable: !1,
        mode: "repulse"
      },
      onclick: {
        enable: !1,
        mode: "push"
      },
      resize: !0
    },
    modes: {
      grab: {
        distance: 400,
        line_linked: {
          opacity: 1
        }
      },
      bubble: {
        distance: 400,
        size: 40,
        duration: 2,
        opacity: 8,
        speed: 3
      },
      repulse: {
        distance: 200,
        duration: 0.4
      },
      push: {
        particles_nb: 4
      },
      remove: {
        particles_nb: 2
      }
    }
  },
  retina_detect: !0
});</script>
<div id="wrap">
    <div id="top">
        <div id="logo">
            <img class="logo"
                 src=""
            />
            <!--如果需要自定义logo图片,使用下面这段代码,并删除上面这段代码,图片位置应放在img下的logo.png-->
            <!--<img class="logo" src="img/logo.png"/>-->
            <p></p>
            <div class="type-js headline">
                <h1 class="text-js">Welcome</h1>
            </div>
            <div class="" id="kg-btn">
                <input class='tgl tgl-flip' id='qieh' type='checkbox'/>
                <label class='tgl-btn' data-tg-off='OFFICE' data-tg-on='HOME' for='qieh'></label>
            </div>
        </div>
    </div>
    <div id="main">
        <!-- 外网访问地址 -->
        <div class="app animated fadeInLeft" id="app">
            <ul>
                <li>
                    <!--添加“class="disabled-link"”属性可以禁用该图标-->
                    <a href="#" target="_blank" class="disabled-link">
                        <img class="shake" src="img/png/AppStore.png"/>
                        <strong>我的博客</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/iCloud-Drive.png"/>
                        <strong>VPS Status</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/Music.png"/>
                        <strong>聆听音乐</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/Photos.png"/>
                        <strong>流金岁月</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/Videos.png"/>
                        <strong>欣赏影片</strong></a>
                </li>
                <li>
                    <a href="http://yuancheng.xunlei.com/" target="_blank">
                        <img class="shake" src="img/png/Thunder.png"/>
                        <strong>迅雷远程</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/Downloads.png"/>
                        <strong>下载管理</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/Transmission.png"/>
                        <strong>Transmission</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/Settings.png"/>
                        <strong>DSM管理</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/FontExplorer-X.png"/>
                        <strong>管理文件</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/Podcats.png"/>
                        <strong>管理路由器</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/FaceTime.png"/>
                        <strong>监控系统</strong></a>
                </li>
            </ul>
        </div>
        <!-- 内网网访问地址 -->
        <div class="app animated fadeInRight" id="app1">
            <ul>
                <li>
                    <!--添加“class="disabled-link"”属性可以禁用该图标-->
                    <a href="#" target="_blank" class="disabled-link">
                        <img class="shake" src="img/png/AppStore.png"/>
                        <strong>我的博客</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/iCloud-Drive.png"/>
                        <strong>VPS Status</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/Music.png"/>
                        <strong>聆听音乐</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/Photos.png"/>
                        <strong>流金岁月</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/Videos.png"/>
                        <strong>欣赏影片</strong></a>
                </li>
                <li>
                    <a href="http://yuancheng.xunlei.com/" target="_blank">
                        <img class="shake" src="img/png/Thunder.png"/>
                        <strong>迅雷远程</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/Downloads.png"/>
                        <strong>下载管理</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/Transmission.png"/>
                        <strong>Transmission</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/Settings.png"/>
                        <strong>DSM管理</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/FontExplorer-X.png"/>
                        <strong>管理文件</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/Podcats.png"/>
                        <strong>管理路由器</strong></a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img class="shake" src="img/png/FaceTime.png"/>
                        <strong>监控系统</strong></a>
                </li>
            </ul>
        </div>
        <div style="clear: both;"></div>
    </div>
</div>
<div id="footer">
    <div class="footer-contents">
        <div class="links">
            <div class="line">
                <a href="https://github.com/asundust/NAS-Nav-iCloud">NasHomeCloud</a>&nbsp;&nbsp;&nbsp;
                <span class="footer-link-separator"></span>&nbsp;&nbsp;&nbsp;
                <span class="copyright">╰(*°▽°*)╯</span>
            </div>
        </div>
    </div>
</div>
</body>
<!--以下代码为内外网自动切换功能，如不需要请删除即可-->
<script type="text/javascript">
    $(function () {
        $.ajax({
            'url': './lan.php?type=base',
            type: 'get',
            dataType: 'json',
            success: function (result) {
                if (result['lan']) {
                    $('#qieh').click();
                } else {
                    if (result['try_can_lan']['try_lan_status']) {
                        $.ajax({
                            'url': result['try_can_lan']['lan_address'] + '/lan.php?type=try_lan',
                            type: 'get',
                            dataType: 'jsonp',
                            success: function (result) {
                                if (result['lan']) {
                                    $('#qieh').click();
                                }
                            }
                        });
                    }
                }
            }
        });
    });
</script>
</html>
